<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>overflow</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    h1{
      font-weight:normal;
    }
    .box{
      height:1300px;
    }
    .title{
      font-family: serif;
    }
    .title2{
      font-family: 'Microsoft Yahei' sans-serif;
    }
    .content{
      text-indent: -3em;
      padding-left: 3em;
      width:200px;
    }
    .img{
      text-indent: -400px;
      overflow:hidden;
    }
    .white-space{
      /* white-space:nowrap; */
    }
    .justify{
      /* text-align:justify; */
      background:lightblue;
      font-size:0;

      background-image:url("https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/308.jpg?2");
      background-attachment: fixed;
      /* background-position:100px 100px; */
      position:relative;
      /* overflow:hidden; */
      background-repeat:no-repeat;
      background-size:100%;
    }
    .justify:after{
      content:'';
      display:inline-block;
      width:100%;
      vertical-align:bottom;
    }
    .justify li{
      display:inline-block;
      text-align:center;
      font-size:16px;
    }
    .justify li img{
      width:200px;
    }
    body{
      height:2000px;
    }
    a[href]:active, button:active{
      background-image: linear-gradient(to top, rgba(0,0,0,.05), rgba(0,0,0,.05));
    }
  </style>
</head>
<body>
  <script>
    <img src=""/>
  </script>
  <p class="white-space">属性声明了 如何     处理元素内 的空白字符，这类空白 字符
包括 Space（空格）键、Enter（回车）键、Tab（制表符）键产生的空白</p>
  <h1 class="title">
    衬线字体font-family
  </h1>
  <h1 class="title2">
    无衬线字体font-family
  </h1>
  <a class="link" href="">解决text-decoration下划线和文本重叠问题</a>
  <ul class="justify">
    <li>
      <img src="https://demo.cssworld.cn/images/common/l/1.jpg">
      <p>图标描述1</p>
    </li>
    <li>
      <img src="https://demo.cssworld.cn/images/common/l/1.jpg">
      <p>图标描述2</p>
    </li>
  </ul>
  <button>点击按钮</button>
  <p class="content">
    提问：问题内容问题内容问题内容问题内容问题内容问题内容问题内容
  </p>
  <p class="content">
    回答：我其实不太确定对你而言，我算是你最好的朋友吗，你好像从来没有跟我讲过，
    所以我一直都有点怀疑，不擅长表达感情，我差点弄丢了这个朋友，
  </p>
  <img src="" class="img" alt="图片"/>
  <div class="box">
    顶部
  </div>
  <a href="#">回到顶部</a>
  <input type="text" name="" id="inp">

  <script>
    // document.getElementById('inp').focus();
    // 蒙层背景锁定 禁止滚动
    var widthBar = 17, root = document.documentElement;
    if(typeof window.innerWidth == 'number'){
      widthBar = window.innerWidth - root.clientWidth
    }
    root.style.overflow = 'hidden'
    root.style.borderRight = widthBar + 'px solid transparent'

    // 隐藏蒙层
    root.style.overflow = ''
    root.style.borderRight = ''
    // fangqi yiduan bushuyu nide ganqing 
    // mianchu yiduan bushuyu nide tongku
    // yishunjian rushizhongfu yizhuanshen xinru daojiao
    // 1.情绪感染

    console.log(eval(1+1))

    // 1A 2CE 3C 4D 5CD 6C 
  </script>
</body>
</html>